<template>
	<view class="content">
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" style="width: 100%;"
			:scroll-left="scrollLeft">
			<view class="uni-tab-item" data-current="0" v-for="(item,index) in tabList" :key="item.id"
				@click="tabClick(index)">
				<text class="uni-tab-item-title" :class="activeTabIndex==index?'uni-tab-item-title-active':''">
					{{item.name}}
				</text>
			</view>
		</scroll-view>
		<view class="video-list">
			<swiper class="vdplayer-swiper" :current="currentVideo" vertical @change="handleSwipeVertical">
				<swiper-item v-for="(item, index) in videoList" :key="index">
					<view class="ua__vdplayer-video flex1">
						<video class="vdplayer" :id="'vdplayer' + index" :ref="'vdplayer' + index" :src="item.src"
							:controls="true" :loop="true" :show-center-play-btn="true" object-fit="fill"
							:autoplay="index == currentVideo" @play="isPlaying=true" @timeupdate="handleTimeUpdate">
							<view class="ua__vdplayer-playwrap" @click="handleVideoClicked">
							</view>
						</video>

					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	var time = null
	export default {
		data() {
			return {
				videoList: [],
				scrollLeft: '0',
				activeTabIndex: 0,
				tabList: [{
						"id": 1,
						"name": '首页'
					},
					{
						"id": 2,
						"name": '推荐'
					},
				],
				play: false,
				pageStartY: 0,
				pageEndY: 0,
				currentVideo: 0,
				isPlaying: false,
				clickNum: 0,
				progressBar: 0,
				clickTimer: null,

			}
		},
		onLoad() {
		},
		watch: {},
		created() {
			this.handleGetVideo()
		},
		methods: {
			handleTimeUpdate(e) {
				let {
					currentTime,
					duration
				} = e.detail
				this.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth))
			},
			sgetVideoCtx() {
				return uni.createVideoContext('vdplayer' + this.currentVideo, this)
			},
			getVideoCtx() {
				return uni.createVideoContext('vdplayer' + this.currentVideo, this)
			},
			handleSwipeVertical(e) {
				let index = e.detail.current
				this.progressBar = 0
				this.isPlaying = false
				let video = this.getVideoCtx()
				if (!video) return
				video.pause()
				video.seek(0)
				this.currentVideo = index
				this.handlePlay()
			},
			handlePlay() {
				let video = this.getVideoCtx()
				if (!video) return
				video.play()
				this.isPlaying = true
			},

			handlePause() {
				let video = this.getVideoCtx()
				if (!video) return
				video.pause()
				this.isPlaying = false
			},
			handleVideoClicked() {
				this.clickTimer && clearTimeout(this.clickTimer)
				this.clickNum++
				this.clickTimer = setTimeout(() => {
					if (this.clickNum >= 2) {
						console.log('你双击了')
					} else {
						console.log('你单击了')
						if (this.isPlaying) {
							this.handlePause()
						} else {
							this.handlePlay()
						}
					}
					this.clickNum = 0
				}, 250)
			},


			tabClick(index) {
				this.activeTabIndex = index;
				this.handleGetVideo()
			},
			async handleGetVideo() {
				let params = {
					info: 'get_video'
				}
				const {
					data: res
				} = await uni.$http.post('https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video', params)
				console.log('res---', res)
				this.videoList = res.data
			}

		}
	}
</script>

<style>
	.content {
		width: 100%;
		background: #000;
	}

	.uni-tab-item-title-active {
		color: #26B6CD;
		border-bottom: 5rpx solid #26B6CD;
	}

	.ua__vdplayer-playwrap {
		width: 100%;
		height: 100%
	}

	.scroll-h {
		position: fixed;
		padding: 16rpx;
		z-index: 100;
		top: 20rpx;
		width: 100%;
		width: 750rpx;
		height: 106rpx;
		display: flex;
		white-space: nowrap;
	}

	.uni-tab-item-title {
		box-sizing: border-box;
		font-size: 30rpx;
		font-weight: bold;
		flex-wrap: nowrap;
		white-space: nowrap;
		color: red;
	}

	.uni-tab-item {
		display: inline-block;
		width: 50%;
		text-align: center;
	}

	.video-list {
		width: 100%;
		height: 100%;
		margin-top: 100rpx;
		padding: 20rpx;
	}

	.vdplayer-swiper {
		width: 100%;
		height: 1050rpx;
	}

	.vdplayer {
		width: 100%;
		height: 1050rpx !important;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		z-index: 19;
	}
	.ua__vdplayer-video{
		width: 95%;
	}
</style>
